<template>
  <el-dialog
    title="配送时间选择"
    :visible.sync="dialogVisible"
    width="350px">

    <div>配送时间:
      <el-select v-model="currSendTime" placeholder="placeholder">
        <el-option
          v-for="(item,index) in sendTimeList"
          :key="index"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <div id="shop-send-time-dialog" style="display: none">
        <div class="title">送货时间</div>
      <div class="left">
        <div class="item" v-for="(item,index) in dayArr" v-text="item.name" :key="index" @click="chooseDay(item.key)" :class="item.key===currDay?'curr':''"></div>
        <div class="c"></div>
      </div>
      <div class="right">
        <div v-if="!timeArr || timeArr.length===0">
          无配送时间选择....
        </div>
        <div class="item" v-for="(item,index) in timeArr" :key="index" v-text="item" @click="chooseDateTime=item" :class="item===chooseDateTime?'curr':''"></div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'ShopSendTimeDialog',
  data: function () {
    return {
      sendTimeList:window.dict.OrderSendTimeInfoList,
      currSendTime:'今天',
      callback:null,
      chooseDateTime:'',
      dialogVisible:false,
      shopId:0,
      addressId:0,
      currDay:'',
      dayArr:[
        {key:'todayDateList',name:'今天'},
        {key:'tomorrowDateList',name:'明天'},
      ],
      timeArr:[],
      sendData:{
        "sendDistance": 2283,
        "shopSendTimeArr": {
          "todayDateList": [
            "2022-08-21 19:00:00",
            "2022-08-21 19:30:00"
          ],
          "tomorrowDateList": [
            "2022-08-22 09:00:00",
            "2022-08-22 09:30:00",
            "2022-08-22 10:00:00",
            "2022-08-22 10:30:00",
            "2022-08-22 11:00:00",
            "2022-08-22 11:30:00",
            "2022-08-22 12:00:00",
            "2022-08-22 12:30:00",
            "2022-08-22 13:00:00",
            "2022-08-22 13:30:00",
            "2022-08-22 14:00:00",
            "2022-08-22 14:30:00",
            "2022-08-22 15:00:00",
            "2022-08-22 15:30:00",
            "2022-08-22 16:00:00",
            "2022-08-22 16:30:00",
            "2022-08-22 17:00:00",
            "2022-08-22 17:30:00",
            "2022-08-22 18:00:00",
            "2022-08-22 18:30:00",
            "2022-08-22 19:00:00",
            "2022-08-22 19:30:00"
          ]
        },
        "isCitySend": 1
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('BackKeyCallBus',function (){
      $this.dialogVisible=false
      $this.$forceUpdate()
    })
    $this.bus.$on('ShopSendTimeDialogCallBus', function (shopId,addressId,callback) {
      $this.shopId=shopId
      $this.addressId=addressId
      $this.dialogVisible = true
      $this.callback=callback
      // console.log($this.sendTimeList)
      $this.getSendTime()
      $this.$forceUpdate()
    })

  },
  methods: {
    // 获取配送时间
    getSendTime:function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Order/getSendDataByAddress', {
        shopId: $this.shopId,
        memberAddressId:$this.addressId
      }, function (sendData) {
        $this.sendData=sendData
        $this.chooseDay('todayDateList')
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    confirm:function () {
      this.callback(this.currSendTime)
      this.dialogVisible = false
      return;
      if (typeof this.callback==='function'){
        this.callback(this.chooseDateTime)
        this.dialogVisible = false
      }
    },
    // 选择日期
    chooseDay:function (dayString) {
      this.currDay=dayString
      // this.timeArr=this.sendData.shopSendTimeArr[dayString]
      this.chooseDateTime=this.timeArr[0]
    },

  }
}
</script>

<style scoped>

</style>
